/* 劳动先锋 */
import { useState } from 'react'
import '../../css/selected.scss'
// 引入图标
import { LeftOutlined, RightOutlined, ArrowRightOutlined, LinuxOutlined, MediumOutlined, RedditOutlined, CoffeeOutlined, SunOutlined, TruckOutlined, AliwangwangOutlined } from '@ant-design/icons';

function selectedRecommendation() {
  const festivalAll = [
    '放假通知', '节日促销', '廉洁过节',
    '世界知识产权日', '世界平面设计日',
    '劳动节'
  ]
  const festivalImgs = [
    {
      img: "/public/laber1.webp",
      title: "秋秋设计",
      msg: '高级简约时尚炫彩新品发布..',
      avatar: <LinuxOutlined />
    },
    {
      img: '/public/laber2.webp',
      title: "金刚芭比",
      msg: '特惠五一大活动来袭..',
      avatar: <RedditOutlined />
    },
    {
      img: "/public/laber3.webp",
      title: "微印象",
      msg: '小清新绿色无污染环保主题..',
      avatar: <CoffeeOutlined />
    },
    {
      img: '/public/laber2.webp',
      title: "神之神角",
      msg: '5.4青年节更显大家风采..',
      avatar: <SunOutlined />
    },
    {
      img: '/public/aae.webp',
      title: "诺澜",
      msg: '爱情公寓全员阵容来袭..',
      avatar: <TruckOutlined />
    },
    {
      img: '/public/aaf.webp',
      title: "诺伊可爱",
      msg: '创意卡通可爱元素主题..',
      avatar: <AliwangwangOutlined />
    },
    {
      img: "/public/aac.webp",
      title: "微印象",
      msg: '小清新绿色无污染环保主题..',
      avatar: <MediumOutlined />
    },
    {
      img: '/public/aad.webp',
      title: "神之神角",
      msg: '5.4青年节更显大家风采..',
      avatar: <LinuxOutlined />
    },
    {
      img: "/public/aaa.gif",
      title: "秋秋设计",
      msg: '高级简约时尚炫彩新品发布..',
      avatar: <LinuxOutlined />
    },
    {
      img: '/public/aab.webp',
      title: "金刚芭比",
      msg: '特惠五一大活动来袭..',
      avatar: <RedditOutlined />
    },
    {
      img: "/public/aac.webp",
      title: "微印象",
      msg: '小清新绿色无污染环保主题..',
      avatar: <CoffeeOutlined />
    },

  ]
  // 左右箭头切换页面
  const [arrowIndex, setarrowIndex] = useState(0)
  const handleArrow = (direction: 'left' | 'right') => {
    if (direction === 'left') {
      if (arrowIndex <= -26) {
        setarrowIndex(arrowIndex + 26);
      }
    } else {
      if (arrowIndex >= -26) {
        setarrowIndex(arrowIndex - 26);
      }
    }
  }

  return (
    <div>
      <div className='RecommendBox'>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
          <h2>争做劳动先锋·为自己点赞 </h2>
          <ul className='RecommendFestival'>
            {
              festivalAll.map((item: any, index: any) => (
                <li key={index} className='festival_li'>{item}</li>
              ))
            }
          </ul>
        </div>
        <div>
          查看推荐&gt;
        </div>
      </div>
      <div>
        <div className='labourBox'>
          <div className='labourBox_content' style={{ transform: `translateX(${arrowIndex}%)` }}>
            {
              festivalImgs.map((item: any, index: any) => (
                <div className='labourBox_content_img' key={index}>
                  <div><img src={item.img} alt="" /></div>
                  <div className='labourBox_content_introduce'>
                    <p>{item.msg} </p>
                    <b style={{ display: 'block' }}>
                      <span style={{ marginRight: '10px', color: '#ff69b4' }}>{item.avatar}</span>
                      <span>{item.title}</span>
                    </b>
                  </div>
                </div>
              ))
            }
            <div className='CreatePoster_right_more'>
              <p className='CreatePoster_right_more_icon'><ArrowRightOutlined />  </p>
              <p>查看更多</p>
            </div>
          </div>
          {/* 左右箭头 */}
          <button style={{ display: arrowIndex === 0 ? 'none' : 'block' }} onClick={() => handleArrow('left')} className='arrowLeft' ><LeftOutlined /></button>
          <button style={{ display: arrowIndex <= -52 ? 'none' : 'block' }} onClick={() => handleArrow('right')} className='arrowRight'><RightOutlined /></button>
        </div>
      </div>
    </div>
  )
}

export default selectedRecommendation


